<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        input[type=text] {
            width: 230px;
            box-sizing: border-box;
            border: 5px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('../img/home.jpg');
            background-position: 10px 10px;
            background-size: 50px;
            background-repeat: no-repeat;
            padding: 30px 80px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }

        input[type=text]:focus {
            width: 100%;
        }
    </style>
</head>

<body>

    <p>Animated search form:</p>

    <form>
        <input type="text" name="search" placeholder="Search">
    </form>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
       
        必知必会
       
        使用的是 背景图片:
            background-image: url('img/home.jpg');
            background-position: 10px 10px;
            background-size: 50px;
            background-repeat: no-repeat;
            padding: 30px  80px;

        推荐使用 svg, 
        svg 的 width="26"  ==>  对应于 font-size:26px;

        固定父容器的高度,  对 svg 使用 vertical-align: middle 可以垂直居中对齐:
        .svg-test svg{
            vertical-align: middle;
        }
    </xmp>


    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .svg-test {
            background: lightgreen;
            height: 80px;
            width: 600px;
            padding: 0 20px;
        }
        .svg-test svg{
            vertical-align: middle;
        }
        .svg-test input {
            height: 100%;
            padding: 12px;
            outline: none;
            border: none;
        }
    </style>
    <h2>            vertical-align: middle;   </h2>
    <div class="svg-test">
        <svg xmlns="http://www.w3.org/2000/svg" width="66" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
        <input type="tel">
    </div>


    <style>
        .svg-btn{
            border: 1px solid red;
        }
        .svg-btn button{
            border: none;
            background: lightgrey;
            font-size: 56px;
        }
    </style>
    <div class="svg-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="56" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
        <button>提交</button>
    </div>





    <style>
        .footer{
            width: 640px;
            border: 1px  solid red;
            font-size: 0;
        }
        .footer-btn{
            width: 33.33%;
            background: transparent;
            border: none;
            font-size: 19px;
        }
    </style>
    <div class="footer">
        <button class="footer-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
            </svg>
            <p>submit</p>
        </button>
        <button class="footer-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
            </svg>
            <p>submit</p>
        </button>
        <button class="footer-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
            </svg>
            <p>submit</p>
        </button>
    </div>



    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

